<template>
  <a-layout style="min-height: 100vh">
    <a-spin :spinning="this.formLoading">
      <a-layout-header style="height: 40px;padding: 0;">
        <a-row style="height: 40px;">
          <a-col :span="1">
          </a-col>
          <a-col :span="21">
            <a-menu
                v-bind:selectedKeys="selectedKeys"
                theme="dark"
                mode="horizontal"
                :style="{ lineHeight: '40px',background_color: '#ecdcdc' }"
            >
              <a-menu-item key="1" @click="changeSelect('1')">表单配置</a-menu-item>
              <a-menu-item key="2" @click="changeSelect('2')">操作权限</a-menu-item>
              <a-menu-item key="3" @click="changeSelect('3')">应用绑定</a-menu-item>
            </a-menu>
          </a-col>
          <a-col :span="2">
            <a-button style="float: right;margin: 5px;" @click="">预览</a-button>
            <a-button type="primary" style="float: right;margin: 5px;" @click="saveToDb">保存</a-button>
          </a-col>
        </a-row>
      </a-layout-header>
      <a-layout>
        <a-layout-content>
          <!--        <router-view :key="$route.fullPath"></router-view>-->
          <DefForm ref="defForm" :class="selectedKeys[0] === '1' ? 'show_class' : 'show_none' "></DefForm>
        </a-layout-content>
      </a-layout>
    </a-spin>
  </a-layout>
</template>

<script>
import draggable from 'vuedraggable'
import {
  DeleteOutlined,
} from '@ant-design/icons-vue';

import {defineComponent, reactive, ref, toRefs} from 'vue'
import {AppFormApi} from "@/components/home/lowCode/appDef/js/AppFormApi";
import {AppFormDesignApi} from "@/components/home/lowCode/appDef/js/AppFormDesignApi";
import DefForm from "@/components/home/lowCode/appDef/form/DefForm";

let idGlobal = 8;

export default defineComponent({
  name: "FormDefine",
  components: {
    DefForm,
    draggable,
    DeleteOutlined,
  },
  setup() {
    let formFieldIndex = 0;

    const formLoading = ref(false);
    const selectedKeys = ref(['1']);
    return {
      formId: '',
      selectedKeys,
      formLoading,
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 16,
      },
      formFieldIndex,
      activeKey: ref('1'),
    }
  },
  created() {
    this.formId = this.$route.query.formId;
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  methods: {
    async changeSelect(key) {
      switch (this.selectedKeys[0]) {
        case '1': // 表单配置
          this.formLoading = true;
          await this.$refs.defForm.mergeBaseInfo();
          this.formLoading = false;
          break;
      }
      this.selectedKeys[0] = key;
    },
    beforeunloadHandler() {
      AppFormDesignApi.removeEdit(this.formId).then(() => {

      })
    },
    async saveToDb() {
      this.formLoading = true;
      const that = this;
      await this.$refs.defForm.mergeBaseInfo();
      AppFormDesignApi.saveToDb({id: this.formId}).then(res => {
        that.$message.success('数据已保存');
        location.reload();
      }).catch((res) => {
        that.$message.error('保存出现异常:' + res);
      })
    },
  }
})
</script>

<style scoped>
.show_class {
}

.show_none {
  display: none;
}
</style>
